<template>
  <div class="app">
    <div class="content" ref="contentRef"></div>
    <button @click="changeData">点击修改数据</button>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'App',
  data() {
    return {
      option: {
        title :{
          text: "vue-echarts-demo"
        },
        tooltip: {},
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        legend: {
          data: ['人数']
        },
        xAxis: {
          type: 'category',
          data: ['vue','react','angular','element-ui','ant-design-vue']
        },
        yAxis: {},
        series: [
          {
            name: '人数',
            data: [200, 150, 100, 50, 50],
            type: 'bar'
          }
        ]
      }
    }
  },
  watch: {
    // 数据改变时重新绘制echarts图
    option: {
      deep: true,
      handler(val) {
        let myChart = echarts.init(this.$refs.contentRef)
        myChart.setOption(val)
      }
    }
  },
/*   created() {
    axios.get('../../3.json/china.json').then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
  }, */
  mounted() {
    let myChart = echarts.init(this.$refs.contentRef)
    myChart.setOption(this.option)
  },
  methods: {
    changeData() {
      this.option.series[0].data = [50,50,100,150,200]
    },
  },
}
</script>

<style>
.content {
  width: 800px;
  height: 500px;
  background: pink;
}
button {
  position: absolute;
  width: 100px;
  height: 26px;
  top: 50px;
  left: 850px;
  border-radius: 10px;
}
</style>
